var PaymentTardinessTable = function () {
  var template = /* html */ `
    <div class="payment-tardiness-table">
      <table ref="paymentTable" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th style="min-width:130px" v-if="checkShow('companyOrderId')">订单编号</th>
            <th style="min-width:100px" v-if="checkShow('factoryNo')">工厂型号</th>
            <th style="min-width:100px" v-if="checkShow('customerNo')">客户型号</th>
            <th style="min-width:100px" v-if="checkShow('customerName')">客户名称</th>
            <th style="min-width:120px" v-if="checkShow('materialName')">物料名称</th>
            <th style="min-width:100px" v-if="checkShow('providerName')">供应商</th>
            <th style="min-width:100px" v-if="checkShow('color')">编号</th>
            <th style="min-width:100px" v-if="checkShow('model')">规格型号</th>
            <th style="min-width:80px" v-if="checkShow('payTime')">应付时间</th>
            <th style="min-width:80px" v-if="checkShow('inOutMoney')">应付金额</th>
            <th style="min-width:80px" v-if="checkShow('receiptPaymentPrice')">实付金额</th>
            <th style="min-width:80px" v-if="checkShow('oweMoney')">欠额</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="finance in financeList" :key="finance.id" :class="{'odd':finance.rowIndex%2!==0}">
            <td v-if="checkShow('companyOrderId')">{{finance.companyOrderId}}</td>
            <td v-if="checkShow('factoryNo')">{{finance.factoryNo}}</td>
            <td v-if="checkShow('customerNo')">{{finance.customerNo}}</td>
            <td v-if="checkShow('customerName')">{{finance.customerName}}</td>
            <td v-if="checkShow('materialName')">{{finance.materialName}}</td>
            <td v-if="checkShow('providerName')">{{finance.providerName}}</td>
            <td v-if="checkShow('color')">{{finance.color}}</td>
            <td v-if="checkShow('model')">{{finance.model}}</td>
            <td class="is-center no-warp" v-if="checkShow('payTime')">{{moment(finance.payTime).format('YYYY-MM-DD')}}</td>
            <td class="is-center no-warp" v-if="checkShow('inOutMoney')">{{finance.inOutMoney}}</td>
            <td class="is-center no-warp" v-if="checkShow('receiptPaymentPrice')">{{finance.receiptPaymentPrice}}</td>
            <td class="is-center no-warp" v-if="checkShow('oweMoney')">{{finance.oweMoney}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    props: {
      finances: {
        type: Array,
        required: true
      },
      hideColumns: {
        type: Array,
        default: function () {
          return [];
        }
      }
    },

    watch: {
      changeData: function (newObj, oldObj) {
        if (newObj.rowIndex === oldObj.rowIndex && newObj.rowIndex >= newObj.finances.length) {
          if (newObj.rowIndex !== 0) {
            this.rowIndex = 0;
            this.boardRunning();
            return;
          }
        }
        this.resetFinanceList();
      }
    },

    computed: {
      changeData: function () {
        return {
          rowIndex: this.rowIndex,
          finances: this.finances
        };
      }
    },

    data: function () {
      return {
        financeList: this.finances,
        rowIndex: 0,
        moment: moment
      };
    },

    mounted: function () {
      this.boardRunning();
      var self = this;
      $(this.$el).resize(function () {
        self.clearTimeoutList();
        if (!self.checkRowMove()) {
          self.rowIndex = 0;
        }
        self.boardRunning();
      });
    },

    methods: {
      boardRunning: function () {
        this.clearTimeoutList();

        this.rowIndexRunning();
      },

      rowIndexRunning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          if (self.checkRowMove()) {
            var rowIndex = self.rowIndex;
            rowIndex++;
            if (rowIndex >= self.finances.length) {
              rowIndex = 0;
            }
            self.rowIndex = rowIndex;
          } else {
            self.rowIndex = 0;
          }

          self.timeoutList[0] = null;
          self.rowIndexRunning();
        }, 5000);
        this.timeoutList[0] = timeout;
      },

      checkRowMove: function () {
        var paymentTable = this.$refs['paymentTable'];
        if (paymentTable === undefined) {
          return false;
        }

        var totalHeight = $(this.$el).height();
        var tableHeight = $(paymentTable).height();
        return totalHeight < tableHeight;
      },

      resetFinanceList: function () {
        var finances = this.finances;
        var rowIndex = this.rowIndex;
        if (rowIndex === 0) {
          this.financeList = _.clone(finances);
          return;
        }

        var financeList = finances.slice(rowIndex);
        var financeArray = finances.slice(0, rowIndex);
        financeList.pushArray(financeArray);
        this.financeList = financeList;
      },

      checkShow:function(field){
        var hideColumns = this.hideColumns;
        return hideColumns.indexOf(field) === -1;
      }
    },

    template: template
  };
}();
